<template>
    <div v-bind:class="propsStatus ? 'switchOn main_bg main_border' : 'switchOff'"></div>
</template>
<script>
export default {

    name: 'onOff',

    props: ['propsStatus'],
}

</script>
<style scoped>
.switchOff,
.switchOn {
    height: 26px;
    border-radius: 14px;
    position: relative;
    width: 50px;
    transition: all .5s;
    display: inline-block;
    vertical-align: middle;
}

.switchOff:before,
.switchOn:before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 14px;
    transition: all .2s;
    transform: translate(0, 0)
}

.switchOff {
    border: 1px solid #ccc;
    background-color: #ccc;
}

.switchOff:before {
    background-color: #fff;
    box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.4)
}

.switchOn {
    border: 1px solid #e8b14f;
}

.switchOn:before {
    background-color: #fff;
    transform: translate(24px, 0);
    box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.4)
}

</style>
